<template>
<<<<<<< HEAD
  <div>
    <div class="top">妙手商城</div>

    <!-- 搜索 -->
    <div class="search">
      <div class="inp">
        <input type="text" placeholder="复方甘草酸苷片" />
        <button>搜索</button>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item class="a1">
          <img src="../../assets/img/a1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="a1">
          <img src="../../assets/img/a2.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="a1">
          <img src="../../assets/img/a3.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="a1">
          <img src="../../assets/img/a4.jpg" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!--正品保障-->

      <!-- 宫格 -->
      <div class="grid">
        <div>
          <img src="../../assets/img/a1.jpg" alt="" />
          <p>延时持香</p>
        </div>
        <div>
          <img src="../../assets/img/a2.jpg" alt="" />
          <p>止脱生发</p>
        </div>
        <div>
          <img src="../../assets/img/a3.jpg" alt="" />
          <p>妇科炎症</p>
        </div>
        <div>
          <img src="../../assets/img/a4.jpg" alt="" />
          <p>平稳降压</p>
        </div>
        <div>
          <img src="../../assets/img/a1.jpg" alt="" />
          <p>稳控血糖</p>
        </div>
        <div>
          <img src="../../assets/img/a2.jpg" alt="" />
          <p>领劵中心</p>
        </div>
        <div>
          <img src="../../assets/img/a3.jpg" alt="" />
          <p>快速降脂</p>
        </div>
        <div>
          <img src="../../assets/img/a4.jpg" alt="" />
          <p>缓解风湿</p>
        </div>
        <div>
          <img src="../../assets/img/a1.jpg" alt="" />
          <p>远离哮喘</p>
        </div>
        <div>
          <img src="../../assets/img/a2.jpg" alt="" />
          <p>全部分类</p>
        </div>
      </div>
      <div class="pin">
        <h3>品牌专区</h3>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <!-- tab切换 -->
      <div class="container">
        <el-card>
          <el-button type="text">
            <i class="el-icon-s-order" />
          </el-button>
          <div class="tab-nav">
            <ul class="tab-tilte">
              <li
                v-for="(item, index) in tabs"
                :key="index"
                :class="{ active: tabIndex == index }"
                @click="changeTab(index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="tab-content" :style="{ transform: `translateX(${-tabIndex * 100}%)` }">
            <div v-for="(item, index) in contents" :key="index" class="tab-item">
              {{ item.name }}
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
=======
  <div>商城</div>
>>>>>>> 88a0c9689dc709dcf0e20439db08525cb2825aed
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const tabIndex = ref(0)
const tabs = ['精选热销', '男性健康', '女性护养', '家庭常备']
const contents = [
  {
    id: '1',
    name: '内容1',
    pic: '',
    title: 'tab栏一区域',
  },
  {
    id: '2',
    name: '内容2',
    pic: '',
    title: 'tab栏二区域',
  },
  {
    id: '3',
    name: '内容3',
    pic: '',
    title: 'tab栏三区域',
  },
  {
    id: '4',
    name: '内容4',
    pic: '',
    title: 'tab栏四区域',
  },
]
const changeTab = (index) => {
  tabIndex.value = index
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 80px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.search {
  width: 100%;
  height: 60px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  .inp {
    width: 90%;
    height: 30px;
    border: 3px solid #ff492a;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    input {
      width: 80%;
      border: 0;
      outline: none;
    }
    button {
      width: 57px;
      height: 30px;
      border: 0;
      border-radius: 15px;
      background: #ff492a;
    }
  }
}
.swiper {
  width: 100%;
  height: 200px;
  .a1 {
    img {
      width: 100%;
      height: 200px;
    }
  }
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-bottom: 20px;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.pin {
  width: 100%;
  height: 200px;
}

.tab-nav ul {
  //ul默认有40左边距
  padding-left: 0px !important;
}
ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab-tilte {
  display: flex;
}

.tab-tilte li {
  flex: 1;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {
  color: black;
  font-weight: bold;
  font-size: 18px;
}

.tab-content {
  display: flex;
  transition: transform 0.5s ease; /* 添加过渡效果，并使用缓动函数 */
}

.tab-item {
  flex: 1;
  min-width: 96%;
  margin: 2%;
  line-height: 100px;
  text-align: left;
}
</style>